<template>
  <div class="post-panel" :style="{ height: `${viewheight.GetViewHeight(105)}px` }">
    <el-scrollbar>
      <div class="post-panel-header">
        <postMaster :loading="loading" />
        <postInfo :loading="loading" />
      </div>
      <span style="font-size: 15px;font-weight: 300;">帖子资源列表</span>
      <div class="source-list" id="comment">
        <el-skeleton animated :loading="loading">
          <template #template>
            <el-skeleton-item variant="text" style="width: 100%;height: 160px;" />
          </template>
          <template #default>
            <scourceListComponent />
          </template>
        </el-skeleton>
      </div>
      <div class="post-panel-comment">
        <postComment v-if="isComment" />
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import postComment from "./post-comment.vue";
import postInfo from "./post-info.vue";
import postMaster from "./post-master.vue";
import { useViewHeightStore } from "@/store/viewheight";
import scourceListComponent from "@components/SourceListComponent/scourceListComponent.vue";
import { useRoute } from "vue-router";
import { usePostInfo } from "@store/postinfo";
import { storeToRefs } from "pinia";
import { onMounted, ref } from "vue";
import { post_getone } from "@api/postapi";
import { get_user, user_check } from "@/api/userapi";
import { get_sourcefile } from "@/api/courseapi";

const { postinfo, postmaster, postlist,check_true } = storeToRefs(usePostInfo());
const route = useRoute();

const viewheight = useViewHeightStore();
const loading = ref<boolean>(true);

const { isComment } = defineProps<{
  isComment: boolean
}>();

onMounted(async () => {
  const res1 = await post_getone(route.params.postid);
  if (res1.code === 200) {
    postinfo.value = res1.data;
  }
  const res2 = await get_user({ id: postinfo.value.userId });
  if (res2.code === 200) {
    postmaster.value = res2.data;
  }
  const res3 = await get_sourcefile({ postId: postinfo.value.id, current: 1, size: 100 });
  if (res3.code === 200) {
    postlist.value = res3.data.records;
  }
  const res4 = await user_check({postId:postinfo.value.id});
  if(res4.code === 200){
    check_true.value = res4.data;
  }
  loading.value = false;
})

</script>

<style scoped lang="less">
.post-panel {
  width: 850px;

  .post-panel-header {
    width: 800px;
    height: 335px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    margin-bottom: 10px;
  }

  .source-list {
    width: 800px;
    margin: 10px 0;
  }

  .post-panel-comment {
    width: 800px;
  }
}
</style>
